<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="app">

        姓名：{{ name }}
        

    </div>
</body>
<script>
    
    
    const obj = {
        _name:"admin",
        // 选择器
        app:document.querySelector(".app"),
        // 获取元素初始内容
        appStartTxt: document.querySelector(".app").innerHTML,
        get name(){
            // 解析内容文本中的 双花括号 标志的内容
            const arr = this.appStartTxt.match(/{{[^}]+}}/g);
            // 遍历获取到的 双花括号 标志
            arr.forEach(val=>{
                // 解析双花括号内的变量名，作为对象的key
                const key = val.match(/[a-z_$][a-z_$0-9]+/ig)[0];
                // 替换DOM原内容，为使用解析出的key读取的对象的指定属性
                this.app.innerHTML = this.appStartTxt.replace(val, obj[ "_"+key ])
            })
            return this._name;
        },
        set name(val){
            // 控制器，修改对象的属性
            // 等同于get中的DOM操作，只是替换的新值是接收到的对象属性的新值
            const arr = this.appStartTxt.match(/{{[^}]+}}/g);
            arr.forEach(item=>{
                this.app.innerHTML = this.appStartTxt.replace(item, val);
            })
            this._name = val;
        }
    }

    obj.name


    // 封装之后
    // const obj = {
    //     _name:"admin",
    //     app:document.querySelector(".app"),
    //     appStartTxt: document.querySelector(".app").innerHTML,
    //     get name(){
    //         this.arr = this.appStartTxt.match(/{{[^}]+}}/g);
    //         this.render(this.arr[0], obj[ "_"+this.arr[0].match(/[a-z_$][a-z_$0-9]+/ig)[0] ] );
    //         return this._name;
    //     },
    //     set name(val){
    //         this.render(this.arr[0], val );
    //         this._name = val;
    //     },
    //     render(oldVal, newVal){
    //         this.app.innerHTML = this.appStartTxt.replace(oldVal, newVal)
    //     }
    // }



</script>
</html>